<template>
  <div id="app">
    <h1 style="text-align: center">第三方数据对接</h1>
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="hover" class="nav-card" @click.native="handleCardClick('/query?type=1', { newWindow: true })">
          <!--          <router-link to="/query" class="nav-link" target="_blank">数据查询</router-link>-->
          <div class="nav-link">跳绳数据查询</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="nav-card" @click.native="handleCardClick('/query?type=2', { newWindow: true })">
          <!--          <router-link to="/query" class="nav-link" target="_blank">数据查询</router-link>-->
          <div class="nav-link">排球数据查询</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="nav-card" @click.native="handleCardClick('/print', { newWindow: true })">
          <!--          <router-link to="/print" class="nav-link" target="_blank">成绩打印</router-link>-->
          <div class="nav-link">成绩打印</div>
        </el-card>
      </el-col>
    </el-row>
    <el-collapse v-model="activeName" accordion class="collapse">
      <el-collapse-item title="模块介绍" name="1">
        <div>【数据查询】根据考生信息获取跳绳、排球项目成绩，支持手动、自动上传至第三方平台。</div>
        <div>【成绩打印】根据考生信息获取跳绳、排球项目成绩，支持单项目打印。</div>
      </el-collapse-item>
      <el-collapse-item title="数据查询(跳绳、排球)" name="2">
        <div>1、本页面列表信息为云平台已考完有成绩的考生列表；</div>
        <div>
          2、【同步平台成绩至本地】：调用云平台已考完有成绩的考生接口，根据准考证号匹配本地考生数据，将项目成绩同步到本地数据库中，并做好标记（待上传）；
        </div>
        <div>
          3、【同步本地成绩至第三方】：遍历本地数据库中（待上传）的考生数据，调用第三方批量上传成绩接口，成功后并做好标记（已上传）；
        </div>
        <div>
          4、【自动同步】：根据（定时时间（毫秒））设置的周期，自动执行【同步平台成绩至本地】和【同步本地成绩至第三方】两个按钮逻辑；
        </div>
        <div>5、【手动同步】：点击按钮一次后，自动执行【同步平台成绩至本地】和【同步本地成绩至第三方】两个按钮逻辑；</div>
      </el-collapse-item>
      <el-collapse-item title="打印成绩" name="3">
        <div>1、本页面列表信息为从第三方同步的考生分组信息；</div>
        <div>2、【清空本地考生分组信息】：清除本地的考生分组信息，非必要不要操作；</div>
        <div>3、【全量获取【第三方】考生分组信息】：先清除本地的考生分组信息后，并同步更新第三方的考生分组信息；</div>
        <div>
          4、【同步云平台成绩至本地】：根据勾选相同项目的考生信息，批量从云平台获取该考生的项目成绩，建议根据【项目】和【组别】条件进行筛选操作；
        </div>
        <div>5、【打印】：根据组别条件查询出考生成绩信息，并进入打印页面进行打印；</div>
      </el-collapse-item>
      <el-collapse-item title="注意事项" name="4">
        <div>1、【跳绳数据查询】和【排球数据查询】分别用两个窗口打开，开启自动同步后不要关闭窗口；</div>
        <div>2、自动同步如若等待时间较长，可根据实际情况调整定时周期，或关闭自动同步，改为手动同步；</div>
        <div>
          3、配置参数：在apiconfig.ini文件中（base_url、username、password、grant_type、client_no、basic_token）几个参数根据现场实际情况作调整；
        </div>
        <div>4、本服务需要兼容互联网和第三方局域网才可使用，启动前优先排查网络情况；</div>
      </el-collapse-item>
    </el-collapse>
    <nav>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      activeName: ['1', '2', '3', '4']
    };
  },
  metaInfo() {
    return {
      title: process.env.VUE_APP_TITLE,
      titleTemplate: '%s'
    }
  },
  methods: {
    handleCardClick(path, options = {}) {
      if (options.newWindow) {
        // 新窗口打开
        const route = this.$router.resolve(path)
        window.open(route.href, '_blank', 'noopener,noreferrer')
      } else {
        // 当前窗口跳转
        this.$router.push(path)
      }
    }
  }
};
</script>

<style scoped>
.main-nav {
  background-color: #f8f9fa; /* 浅灰色背景 */
  padding: 1rem; /* 内边距 */
  border-radius: 4px; /* 圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
  display: flex; /* 弹性布局使链接水平排列 */
  gap: 1rem; /* 链接之间的间距 */
}

.nav-link {
  width: 100%;
  color: #343a40; /* 深灰色文字 */
  text-decoration: none; /* 去除下划线 */
  padding: 0.5rem 1rem; /* 内边距 */
  border-radius: 4px; /* 圆角 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
  font-size: 28px;
}

.nav-link:hover {
  color: #007bff; /* 悬停时文字颜色变为蓝色 */
}

/* 当前活动路由的链接样式 */
.nav-link.router-link-exact-active {
  background-color: #007bff; /* 蓝色背景 */
  color: white; /* 白色文字 */
}

.nav-card {
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 8px;
  text-align: center;
}

/* 卡片悬停效果增强 */
.nav-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.collapse {
  margin-top: 5px;
}
</style>
